<template>
  <div class="m-shop">
    <div class="header"><PbHeader></PbHeader></div>
    <div class="carousel">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="(item, index) in imgs" :key="index">
          <div><img :src="item" alt="" /></div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="shop-header">
      <div class="details-wrapper">
        <div class="details" @mouseenter="_upOrDownEnter" @mouseleave="_upOrDownLeave">
          <div class="info">
            <img class="info-img" :src="shop.path" alt="" />
            <div class="name-rating">
              <div class="name">
                <span class="text">{{ shop.name }}</span>
                <span :class="{ 'el-icon-caret-bottom': !upOrDown, 'el-icon-caret-top': upOrDown }"></span>
              </div>
              <div class="rating"><el-rate v-model="shop.rating" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate></div>
            </div>
          </div>
          <div class="shop-time">
            <span class="el-icon-time"></span>
            <span class="time">营业时间</span>
            <span class="timer">{{ shop.time }}</span>
          </div>
          <div class="shop-addr">
            <span class="el-icon-location"></span>
            <span class="addr">商家地址</span>
            <span class="addr-text">{{ shop.addr }}</span>
          </div>
        </div>
      </div>
      <div class="send-info">
        <div class="time">
          <h3 class="title">平均送餐时间</h3>
          <p class="text">{{ shop.send_time }}分钟</p>
        </div>
        <div class="pre-price">
          <h3 class="title">起送</h3>
          <p class="text">{{ shop.pre_price }}分钟</p>
        </div>
        <div class="send-price">
          <h3 class="title">配送费</h3>
          <p class="text">{{ shop.send_price }}分钟</p>
        </div>
      </div>
      <div class="collect">
        <h3 class="title">收藏本店</h3>
        <div class="collect-icon"><span class="el-icon-star-on" @click="_collected" :class="{ active: collected }"></span></div>
      </div>
    </div>
    <div class="s-router-view">
      <div class="s-content-nav">
        <ul class="s-links">
          <li class="s-item" @click="_navActive(index)" v-for="(item, index) in links" :key="index">
            <router-link :class="{ active: item.isActive }" class="s-link" :to="item.href">{{ item.text }}</router-link>
          </li>
        </ul>
      </div>
      <Menu :shop="shop"></Menu>
    </div>
  </div>
</template>

<script>
import Axios from 'axios';
import PbHeader from '@/components/take/header/header.vue';
import Menu from '@/components/shop/menu/menu.vue';

export default {
  data() {
    return {
      imgs: [
        'http://p0.meituan.net/codeman/daa73310c9e57454dc97f0146640fd9f69772.jpg',
        'http://p1.meituan.net/codeman/826a5ed09dab49af658c34624d75491861404.jpg',
        'http://p0.meituan.net/codeman/a97baf515235f4c5a2b1323a741e577185048.jpg',
        'http://p0.meituan.net/codeman/33ff80dc00f832d697f3e20fc030799560495.jpg',
        'https://p1.meituan.net/travelcube/01d2ab1efac6e2b7adcfcdf57b8cb5481085686.png'
      ],
      shop: {},
      upOrDown: true,
      collected: false,
      links: [
        {
          text: '菜单',
          href: 'menu',
          isActive: true
        },
        {
          text: '评价',
          href: 'rate',
          isActive: false
        },
        {
          text: '食品安全档案',
          href: 'info',
          isActive: false
        }
      ]
    };
  },
  methods: {
    _upOrDownEnter() {
      this.upOrDown = true;
    },
    _upOrDownLeave() {
      this.upOrDown = false;
    },
    _collected() {
      this.collected = !this.collected;
    },
    _navActive(index) {
      this.links.forEach(link => {
        link.isActive = false;
      });
      this.links[index].isActive = true;
    }
  },
  created() {
    Axios.get('/shop').then(resp => {
      this.shop = resp.data;
    });
  },
  components: {
    PbHeader,
    Menu
  }
};
</script>
<style lang="stylus">
.m-shop
  background-color #F5F5F5
  .header
    position sticky
    z-index 999
    top 0
    width 100%
    height 4.375rem
    box-shadow 0 3px 100px rgba(7, 17, 27, 0.2)
    background-color #FFFFFF
  .carousel
    width 980px
    margin 0 auto
  .shop-header
    margin 20px auto 0 auto
    width 980px
    display flex
    height 120px
    background-color #fff
    .details-wrapper
      flex 0 0 412px
      width 412px
      height 100%
      position relative
      .details
        position absolute
        background-color #fff
        width 100%
        left 0
        top 0
        cursor pointer
        height 120px
        overflow hidden
        &:hover
          height 220px
          box-shadow 0 0 5px rgba(7, 17, 27, 0.2)
        .info
          height 120px
          display flex
          font-size 0
          .info-img
            display inline-block
            width 106px
            height 80px
            box-sizing border-box
            border 1px solid rgba(7, 17, 27, 0.3)
            margin 20px 0 0 20px
          .name-rating
            display inline-block
            height 80px
            vertical-align top
            margin 20px 0 0 20px
            .name
              font-size 16px
              margin-top 15px
            .rating
              margin-top 10px
        .shop-time
          margin-left 20px
          height 40px
          line-height 40px
        .shop-addr
          @extend .shop-time
    .send-info
      flex 1
      height 120px
    .collect
      flex 0 0 120px
      width 120px
      height 120px
      text-align center
      box-sizing border-box
      border-left 1px dashed #e5e5e5
      .title
        font-size 12px
        margin-top 20px
      .collect-icon
        width 100%
        margin-top 20px
        .el-icon-star-on
          font-size 30px
          cursor pointer
          &.active
            color red
  .s-router-view
    width 980px
    margin 20px auto 0 auto
    .s-content-nav
      width 660px
      background-color #fff
      height 50px
      box-sizing border-box
      border-bottom 1px solid rgba(7, 17, 27, 0.1)
      .s-links
        height 50px
        font-size 0
        .s-item
          display inline-block
          height 50px
          line-height 50px
          .s-link
            display inline-block
            font-size 16px
            font-weight 400
            color #000
            margin 0 30px
            height 50px
            line-height 50px
            box-sizing border-box
            &.active
              border-bottom 3px solid #ffa627
  .m-cart-wrapper
    position fixed
    bottom 0
    right 0
    width 320px
    box-sizing border-box
</style>
